<template>
  <div class="bg">
    <!--js粒子背景效果-->
    <canvas class="cavs"></canvas>
    <!--登录表单-->
    <el-container>
      <!--ref获取页面的dom元素-->
      <el-form
        :model="loginForm"
        :rules="rules"
        ref="loginForm"
        label-width="auto"
        class="demo-ruleForm loginForm"
      >
        <h2 style="color: #D3D7F7; padding-bottom: 20px">学校后勤管理系统</h2>
        <!--prop传值-->
        <el-form-item label="用户名" prop="id">
          <!--图标为el-icon-user-->
          <el-input prefix-icon="el-icon-user" v-model="loginForm.id" clearable placeholder="请输入用户ID"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input prefix-icon="el-icon-lock" v-model="loginForm.password" clearable show-password placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item label="身份" prop="role">
          <el-select v-model="loginForm.role" placeholder="请选择身份" style="width: 100%">
            <el-option
              v-for="item in role"
              :key="item.id"
              :label="item.name"
              :value="item.name"></el-option>
          </el-select>
        </el-form-item>
        <!--type=“primary”鼠标滑过/点击背景变深色调-->
        <el-button @click="submitForm('loginForm')">登录</el-button>
        <el-button @click="resetForm('loginForm')" style="margin: 15px 0">重置</el-button>
      </el-form>
    </el-container>
  </div>
</template>

<script>
  /*qs是一个增加了一些安全性的查询字符串解析和序列化字符串的库*/
  import Qs from 'qs'
  import '../utils/ban'
  export default {
    name: "LoginPage",
    data(){
      return{
        role:[
          {id:1,name:'管理员'},
          {id:2,name:'学生'},
          {id:3,name:'食堂'}
        ],
        loginForm:{},
        rules:{
          id:[
            {required:true,message:'请输入用户ID',trigger:'blur'}
          ],
          password: [
            {required:true,message:'请输入密码',trigger:'blur'},
          ],
          role:[
            {required:true,message:'请选择身份',trigger:'blur'}
          ]
        }
      }
    },
    methods:{
      /*提交表单函数*/
      submitForm(formName){
        /*提交表单时会做一个所有数据项的校验*/
        this.$refs[formName].validate((valid)=>{
          /*valid表单验证*/
          if(valid){
            let params = Qs.stringify(this.loginForm);
            this.$http.post('/user/login',params).then((response)=>{
                if(response.status === 200){//先判断状态码
                  if (response.data.code === 10000){//在判断结果码
                    this.$notify({
                      title:'登录成功',
                      type: 'success',
                      duration: 1000
                    });
                    /*先缓存当前用户对象到浏览器缓存中*/
                     sessionStorage.setItem('user',JSON.stringify(response.data.data));
                    /*根据角色身份跳对应的路由*/
                    if (this.loginForm.role === '管理员'){
                      this.$router.push('/home/user');
                    } else if(this.loginForm.role === '学生') {
                      this.$router.push('/home/order');
                    } else {
                      this.$router.push('/home/order');
                    }
                  }else{
                    /*当ElementUI组件库全局注册成功后，会在Vue的原型对象上注册一系列提示消息的函数*/
                    this.$notify.error({
                      title:'错误',
                      message:response.data.msg,
                      duration: 1000
                    });
                  }
                }else {
                  this.$notify.error({
                    title:'错误',
                    message:response.status+response.statusText,
                    duration: 1000,
                  });
                }
              })
          }
        });
      },
      /*重置表单函数*/
      resetForm(formName){
        this.$refs[formName].resetFields();
      }
    }
  }
</script>

<style scoped>
  /*.bg {
    width: 100%;
    height: 100vh;
    background: url("./src/assets/image/bg1.jpg");
    background-size: 100% 100%;
  }*/
  >>>.el-container {
    z-index: 99999;
  }
 >>>.el-input__inner {
   background: transparent;
   color: #61BFFF;
   /*border: 1px solid #4FA1D9;*/
   border: none;
 }
 >>>.el-button {
   background: transparent;
   border: 2px solid #4FA1D9;
   color: #4FA1D9;
 }
 >>>.el-button:hover {
   background: #4FA1D9;
   color: #fff;
 }
  .loginForm {
    width: 540px;
    height: 450px;
    /*background-color: white;*/
    /*设置圆角*/
    border-radius: 10px;
    padding: 0 60px;
    /*盒子模型*/
    box-sizing: border-box;
    /*flex布局，垂直结构*/
    display: flex;
    flex-direction: column;
    /*主轴上的对齐方式*/
    justify-content: center;
    /*绝对布局*/
    position: absolute;
    top: 50%;
    left: 50%;
    /*实现水平居中*/
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.5);
    box-shadow: -15px 15px 15px rgba(6, 17, 47, 0.7);
    z-index: 99;
  }
  .cavs {
    z-index: 1;
    position: fixed;
    top: 0;
    left: 0;
    opacity: 1;
  }
</style>
